<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
  >
    <template #top>
      <wd-navbar 
        title="授权中心地址" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

    <view class="px-[24rpx] box-border">
      <view 
        class="center-item" 
        v-for="item in dataList" 
        :key="item.id"
        @click="handleCenterClick(item)"
      >
        <view class="center-title">{{ item.name }}</view>
        <view class="center-address">
          <text class="address-label">所在地址：</text>
          <text class="address-text">{{ item.address }}</text>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'CenterAddress',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // TODO: 这里应该调用后端接口获取数据
  // 目前使用假数据模拟
  
  setTimeout(() => {
    const mockData = []
    const startIndex = (pageNo - 1) * pageSize
    const total = 20
    const endIndex = Math.min(startIndex + pageSize, total)
    
    // 模拟数据
    const provinces = [
      { name: '湖北', city: '武汉市', district: '硚口区', detail: '园博园东路9号汉口里2楼' },
      { name: '湖南', city: '长沙市', district: '岳麓区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '河南', city: '郑州市', district: '金水区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '广东', city: '广州市', district: '天河区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '江苏', city: '南京市', district: '秦淮区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '浙江', city: '杭州市', district: '西湖区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '四川', city: '成都市', district: '武侯区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
      { name: '山东', city: '济南市', district: '历下区', detail: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' },
    ]
    
    for (let i = startIndex; i < endIndex; i++) {
      const provinceData = provinces[i % provinces.length]
      mockData.push({
        id: i + 1,
        name: `强脑科技${provinceData.name}授权中心`,
        address: `${provinceData.name}省${provinceData.city}${provinceData.district}${provinceData.detail}`,
      })
    }
    
    pagingRef.value?.complete(mockData)
  }, 500)
}

// 点击授权中心项
const handleCenterClick = (item) => {
  // TODO: 可以跳转到详情页或打开地图导航等
  console.log('点击了授权中心:', item)
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>

.center-item {
  background: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.center-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #282828;
  line-height: 44rpx;
  margin-bottom: 16rpx;
}

.center-address {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
}

.address-label {
  color: #666;
}

.address-text {
  color: #666;
}
</style>
